<template>
  <div style="height: 100%">
    <div ref="container" style="height: 100%"></div>

    <button @click="goBack" style="position: fixed; top: 20px; left: 20px; padding: 1px; font-size: 14px; cursor: pointer;">返回</button>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      myChart: null,
      option: null,
      carProductionData: {
        name: '比亚迪', demand: 200, desc: '比亚迪型号为X的电动汽车生产200辆',
        children: [
          { // 电池
            name: '瀚荣电子',  demand: 200, desc: '电池总装',
            children: [
              {
                name: '科陆电子',  demand: 400, desc: '电池生产',
                children: [
                  { name: '宁德时代',  demand: 400, desc: '电池单体制造',},
                  { name: '德赛西威',  demand: 200, desc: '电池模组', }
                ]
              },
            ]
          },
          { // 驱动
            name: '长城汽车', demand: 200, desc: '驱动系统总装',
            children: [
              { name: '上海莱士',  demand: 200, desc: '电动机生产', children: [{ name: '正泰集团', demand: 200, desc: '电动机控制器'}] },
              { name: '万向集团',  demand: 200, desc: '传动系统生产' },
            ]
          },
          { // 中控
            name: '华为', demand: 200, desc: '中控系统总装',
          },
          { // 车身
            name: '长安汽车',  demand: 200, desc: '车身总装',
            children: [
              { name: '宝钢集团',  demand: 200, desc: '冲压成型、焊接' },
            ]
          },
          { // 底盘
            name: '奇瑞', demand: 200, desc: '底盘总装',
            children: [
              { name: '吉利',  demand: 600, desc: '底盘零配件制造' },
            ]
          },
          { name: '广汽',  demand: 200, desc: '座舱及内饰总装'}
        ]
      }
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.myChart = echarts.init(this.$refs.container, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });

      this.myChart.showLoading();

      this.option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
          formatter: (params) => {
            return params.name + '<br/>'
              + '需求量预测值: ' + params.data.demand + '<br/>'
              + '任务描述: ' + params.data.desc;
          }
        },
        legend: {
          top: '2%',
          left: '3%',
          orient: 'vertical',
          data: [
            {
              name: '任务1',
              icon: 'rectangle'
            }
          ],
          borderColor: '#c23531'
        },
        series: [
          {
            type: 'tree',
            name: '任务1',
            data: [this.carProductionData],
            top: '5%',
            left: '20%',
            bottom: '2%',
            right: '30%',
            symbolSize: 7,
            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right'
            },
            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left'
              }
            },
            emphasis: {
              focus: 'descendant'
            },
            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
            // itemStyle: {
            //   color: (params) => {
            //     // 根据节点的 status 字段返回对应的颜色
            //     switch (params.data.status) {
            //       case 0:
            //         return 'rgba(255, 165, 0, 0.8)'; // 淡橙色
            //       case 1:
            //         return 'rgba(135, 206, 250, 0.8)'; // 淡蓝色
            //       case 2:
            //         return 'rgba(255, 0, 0, 0.8)'; // 红色
            //       case 3:
            //         return 'rgba(0, 128, 0, 0.8)'; // 绿色
            //       case 4:
            //         return 'rgba(128, 128, 128, 0.8)'; // 灰色
            //       default:
            //         return '#c23531'; // 默认为黑色
            //     }
            //   }
            // }
          }
        ]
      };

      this.myChart.hideLoading();
      this.myChart.setOption(this.option);

      window.addEventListener('resize', this.myChart.resize);
    },
    goBack() {
      // window.location.href = 'roots.html';
      this.$router.go(-1); // 返回上一个页面
    }
  }
};
</script>
